<%@ page language="java" contentType="text/html; charset=UTF-8" import="java.util.*"%>
<!DOCTYPE html>
<html>
<head>
<title>Ajax测试</title>

<!-- 导入JQ -->
<script type="text/javascript" src="js/jq.js"></script>

<!-- Js代码 -->
<script type="text/javascript">
	//页面加载请求省的信息
	$(function(){
		//发起Ajax请求
		$.get("AreaServlet",{parentid:0,method:"findOtherArea"},function(data){
			//使用eval方法将数据转换为JS对象
			eval("var areas ="+data)
			//将响应省的数据填充到省下拉框中
			//获取下拉框对象
			var sel = $("#pre");
			//清空原有内容
			sel.empty();
			//遍历
			for(var i =0;i<areas.length;i++){
				//填充
				sel.append("<option value ='"+areas[i].areaid+"' >"+areas[i].areaname+"</option>")
			}
			//触发市的change事件
			$("#pre").trigger("change");
		});
		//页面加载成功。给市下拉框添加onchange事件
		$("#pre").change(function(){
			//获取当前省的id
			var pid = $("#pre").val();
			//发起ajax请求，请求当前省的市信息
			$.get("AreaServlet",{parentid:pid,method:"findOtherArea"},function(data){
				//使用eval方法将Json值转化为js对象
				eval("var areas ="+data)
				//获取下拉框对象
				var sel =$("#city");
				//清空原有内容
				sel.empty();
				//遍历
				for(var i = 0;i<areas.length;i++){
					//填充
					sel.append("<option value ='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
				}
				//触发县的change事件
				$("#city").trigger("change");
			})
			//页面加载成功，添加区/县下拉框的change事件
			$("#city").change(function(){
				//获取当前市的id
				var pid = $("#city").val();
				//发起ajax请求
				$.get("AreaServlet",{parentid:pid,method:"findOtherArea"},function(data){
					//使用eval方法将Json值转化为js对象
					eval("var areas ="+data)
					//获取下拉框对象
					var sel =$("#county");
					//清空所有内容
					sel.empty();
					//遍历
					for(var i = 0;i<areas.length;i++){
						sel.append("<option value ='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
					}
				})
			})
		});
	})
</script>

</head>

<body style="background-color: gray">
	<div style="margin: auto; width: 800px; margin-top: 200px;">
		省：<select name="" id="pre" style="width: 200px; height: 30px"></select>
		市：<select name="" id="city" style="width: 200px; height: 30px"></select>
		区\县：<select name="" id="county" style="width: 200px; height: 30px"></select>
	</div>
</body>
</html>